<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        #popup {
            width: 200px;
            height: 80px;
            position: fixed;
            z-index: 1000;
            top: 10px;
            left: 30px;
            border: 1px solid #333;
            background-color: #fff;
            display: none;
        }
    </style>
</head>

<body>
    <!-- 1、自定义DOM -->
    <div id="popup">
        <div id="content"></div>
        <button id="hide">隐藏</button>
    </div>
    <div id="map">
    </div>
    <script>
        var map = new ol.Map({
            target: "map",
            layers: [gaode],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        const style = new ol.style.Style({
            /**{olx.style.IconOptions}类型*/
            image: new ol.style.Circle({
                radius: 20,
                fill: new ol.style.Fill({
                    color: "red"
                })
            })
        })
        const point = new ol.Feature({
            geometry: new ol.geom.Point([114.30, 30.50]),
            name: "武汉-gis"
        })
        point.setStyle(style)
        /* layer-source */
        let source = new ol.source.Vector({

        })
        source.addFeature(point)
        let layer = new ol.layer.Vector({

        })
        layer.setSource(source);
        layer.setMap(map);

        /* 事件监听 */
        map.on('pointermove', function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });
        let pop_feature = null
        /* 点击要素,获取要素点的位置,将popup显示到对应位置 */
        map.on('click', function (evt) {
            //判断当前单击处是否有要素，捕获到要素时弹出popup
            pop_feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
            toPoppingUp()
        });
        function toPoppingUp() {
            if (pop_feature) {
                let position = pop_feature.getGeometry().getCoordinates();
                /* 将要素的地理坐标转换为屏幕坐标 */
                var window_position = map.getPixelFromCoordinate(position)
                console.log(window_position, 'window_position')
                var name = pop_feature.get("name")
                $("#popup").show(500).css({ // 500毫秒的过渡
                    left: window_position[0] + "px",
                    top: window_position[1] + "px"
                })
                $("#content").html(name)
            }
        }
        $("#hide").click(function () {
            $("#popup").hide(500)// 500毫秒的过渡
            pop_feature = null
        })
        map.on('postrender', (e) => {
            console.log('postrender')// 地图框架渲染
            toPoppingUp()
        })
        /* map.on('postcompose', (e) => {
            console.log('postcompose')
        })
        map.on('precompose', (e) => {
            console.log('precompose')
        })
        map.on('rendercomplete', (e) => {
            console.log('rendercomplete')// 渲染完成
        }) */
        // 1.当地图刚刚打开时：
        // precompose  postcompose  postrender 这三者依次触发
        // precompose  postcompose  postrender,precompose  postcompose  postrender
        // precompose  postcompose  postrender,precompose  postcompose  postrender
        // 这样循环多次
        // 全部渲染完，最后触发 rendercomplete。
        // 至此，所有事件触发完毕。
        // 2.之后再拖动时，会依次调用 precompose  postcompose  postrender rendercomplete
        // precompose  postcompose  postrender rendercomplete，
        // precompose  postcompose  postrender rendercomplete,
        // precompose  postcompose  postrender rendercomplete
        // 这样循环触发多次。直到不再拖动。
        // 或者这样循环触发多次之后，再来一回像1.那样的循环。
        //（一般移动的如果比较大，就会加上1.，移动的比较小，就不会加上1.）
        // 3.之后再放大缩小时，事件触发情况同上。

        // 总结：一般如果有很多东西都未加载过，就会出现1.的循环情况。
        // 如果一些东西已经加载过了，并已经产生了缓存，就会直接进行2.中前半部分那种循环。
    </script>
</body>

</html>